<template>
      <div class="app-container">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="medium">
            <el-form-item label="员工工号" prop="jobNumber" >
                <el-input v-model="form.jobNumber" style="width:300px" @blur="testExist()" />
            </el-form-item>
            <el-form-item label="绩效增减" prop="performance">
                <el-cascader v-model="form.performance" placeholder="请选择需要增减绩效" separator=" " :options="options" clearable style="width:300px"/>
            </el-form-item>          
            <el-form-item label="记录说明" prop="performanceDesc">
                <el-input v-model="form.performanceDesc" type="textarea" style="width:300px" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">添加</el-button>
                <el-button type="primary" @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { savePerformance } from '../../api/performance.js'
import { testWorkNum } from '@/api/user'
export default {
    data() {
        return {
            form: {
                jobNumber: '',              //员工工号
                performance: '',            //绩效增减
                performanceDesc: ''         //记录说明
            },
            options: [{
                value: '+',
                label: '+',
                children: [{
                value: '0.01',
                label: '0.01'
                }, {
                value: '0.02',
                label: '0.02'
                }, {
                value: '0.03',
                label: '0.03'
                }, {
                value: '0.1',
                label: '0.1'
                }, {
                value: '0.2',
                label: '0.2'
                }, {
                value: '0.3',
                label: '0.3'
                }]
            }, {
                value: '-',
                label: '-',
                children: [{
                value: '0.01',
                label: '0.01'
                }, {
                value: '0.02',
                label: '0.02'
                }, {
                value: '0.03',
                label: '0.03'
                }, {
                value: '0.1',
                label: '0.1'
                }, {
                value: '0.2',
                label: '0.2'
                }, {
                value: '0.3',
                label: '0.3'
                }]
            }],
            rules:{
              jobNumber: [
                { required: true, message: '请输入员工工号', trigger: 'blur' }
              ],
              performance: [
                { required: true, message: '请输入绩效数据', trigger: 'blur' }
              ]
            }
        }
    },
    methods: {
        // 对整个表单输入进行清空
        resetForm(formItem) {
          this.$refs[formItem].resetFields()
        },
        // 将当前输入的工号传递到后台系统，验证改工号是否已经被注册
        async testExist() {
          const data = await testWorkNum({ jobNumber: this.form.jobNumber,type: '1' })
          if(data.code == '2'){
                this.$message({
                  type: 'warning ',
                  message: '工号不存在，请核对！'
              })
            }else{
                this.$message({
                  type: 'success',
                  message: '工号验证通过'
            })
          }
        },
        // 对表单信息的处理
        async handleForm() {
            let query = Object.assign({},this.form)
            query.performance = query.performance.join(" ")
            const data = await savePerformance(query)
            const errMsg = data.msg
            if(data.code == '1'){
              this.$message({
                showClose: true,
                message: errMsg,
                type: 'success'
              })
            }else{
              this.$message({
                showClose: true,
                message: errMsg,
                type: 'warning'
              })
            }
        },
        // 验证表单信息提交
        onSubmit(formName) {
          this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleForm()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        }
    }
}
</script>

<style>

</style>